<template>
  <div>
    <!-- 面包屑导航条 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>课程管理</el-breadcrumb-item>
      <el-breadcrumb-item>推荐管理</el-breadcrumb-item>
    </el-breadcrumb>

    <!-- 卡片视图 -->
    <el-card class="box-card">
      <el-form :model="searchForm" class="demo-form-inline" >
        <el-form-item>
          <el-input style="width:105px;height:30px;"  placeholder="课程名" v-model="searchForm.courseName"></el-input>
            <el-select style="width:150px;height:30px; margin-left: 10px" v-model="searchForm.recommended" placeholder="选择推荐类型">
              <el-option label="首页-为你推荐课程" :value="1"></el-option>
            </el-select>
            <el-select style="width:150px;height:30px; margin-left: 10px" v-model="searchForm.courseStatus" placeholder="选择状态类型">
              <el-option label="上架" :value="1"></el-option>
              <el-option label="下架" :value="2"></el-option>
            </el-select>
          <el-button @click="searchList" style="margin-left: 10px" plain type="info">搜索</el-button>
          <el-button @click="searchEmpty" plain type="info">清空</el-button>
          <el-button @click="searchRecommend" type="primary">添加推荐课程</el-button>
        </el-form-item>
      </el-form>

      <el-table
        :data="recommendList"
        stripe
        style="width: 100%">
        <el-table-column
          type="index"
          width="50">
        </el-table-column>
        <el-table-column
          label="课程名称"
          prop="courseName"
          width="150">
        </el-table-column>
        <el-table-column
          label="推荐分类"
          width="150">
          <template slot-scope="scope">
            {{scope.row.recommended | recommendedFit}}
          </template>
        </el-table-column>
        <el-table-column
          label="排序值"
          prop="sortValue"
          width="150">
        </el-table-column>
        <el-table-column
          label="状态"
          prop="courseStatus"
          width="150">
          <template slot-scope="scope">
            {{scope.row.courseStatus | courseStatusFit}}
          </template>
        </el-table-column>
        <el-table-column
          label="有效结束时间"
          width="150">
          <template slot-scope="scope">
            <span v-if ="scope.row.expiryMode==1">{{scope.row.expiryDays | expiryDaysFit}}</span>
            <span v-if ="scope.row.expiryMode==2">{{scope.row.expiryTime | dateFit('YYYY/MM/DD')}}</span>
          </template>
        </el-table-column>
        <el-table-column
          label="操作"
          width="150">
          <template slot-scope="scope">
            <el-button @click="removeRecommend(scope.row.id)" size="small" type="text">删除</el-button>
            <el-button @click="getByRecommendId(scope.row.id)" size="small" type="text">修改排序</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        :current-page="page.currentPage"
        :page-size="page.pageSize"
        :page-sizes="[5, 10, 20, 40]"
        :total="total"
        @current-change="handleCurrentChange"
        @size-change="handleSizeChange"
        layout="total, sizes, prev, pager, next, jumper">
      </el-pagination>

      <el-dialog :visible.sync="dialogFormVisible" :append-to-body=true>
        <el-form :rules="rules" ref="ruleForm"  :model="recommendForm">
          <el-form-item label="排序值" label-width='120px' prop="sortValue">
            <el-input v-model="recommendForm.sortValue" autocomplete="off"></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="updateRecommend">确 定</el-button>
        </div>
      </el-dialog>

      <el-dialog title="选择推荐课程" :visible.sync="dialogTableVisible" :append-to-body=true>
        <el-table :data="recommendLists">
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button @click="getRecommend(scope.row.id)" size="small" type="text">推荐</el-button>
            </template>
          </el-table-column>
          <el-table-column property="courseName" label="课程名" width="150"></el-table-column>
          <el-table-column property="categoryParentId" label="专业" width="150"></el-table-column>
          <el-table-column property="price" label="课程价格" width="150"></el-table-column>
          <el-table-column property="lessionNum" label="课时" width="150"></el-table-column>
          <el-table-column property="pageViewcount" label="浏览量" width="150"></el-table-column>
        </el-table>
      </el-dialog>
    </el-card>
  </div>
</template>

<script>
    export default {
      name: "Recommendation",
      data() {
        return {
          searchForm: {},
          page: {
            currentPage: 0,
            pageSize: 5
          },
          total: 0,
          recommendList:[],
          recommendForm:{},
          dialogFormVisible:false,
          rules:{
            sortValue: { required: true, message: '请输入排序值', trigger: 'blur' }
          },
          recommendLists:[],
          dialogTableVisible:false
        }
      },
      methods: {
        getRecommend:function(id){//添加推荐课程
          this.$http.get("education-course/base/getRecommend/"+id).then((res) => {
            if (res.data.success) {
              this.$message({
                message: res.data.message,
                type: 'success'
              })
              this.dialogTableVisible = false
              this.searchList()
            } else {
              this.$message.error(res.data.message)
            }
          })
        },
        searchRecommend:function(){//查找未推荐课程
          this.$http.get("education-course/base/searchRecommend").then((res) => {
            this.recommendLists = res.data.result
            this.dialogTableVisible = true
          })
        },
        updateRecommend:function(){//修改排序
          debugger
          this.$refs['ruleForm'].validate((valid) => {
            if (!valid) {
              return
            }

            this.$http.post("education-course/base/updateRecommend", this.recommendForm).then((res) => {
              debugger
              //如何提示
              if (res.data.success) {
                this.$message({
                  message: res.data.message,
                  type: 'success'
                })
              } else {
                this.$message.error(res.data.message)
              }
              //关闭dialog框
              this.dialogFormVisible = false
              //重新加载列表
              this.searchList()
            })
          })
        },
        getByRecommendId:function(id){//根据id查找推荐课程
          debugger
          this.$http.get("education-course/base/getByRecommendId/" + id).then((res) => {
            debugger
            if (res.data.success) {
              this.recommendForm = res.data.result //赋值
              this.dialogFormVisible = true //显示dialog框
            } else {
              this.$message.error(res.data.message)
            }
          });
        },
        removeRecommend:function (id) {//删除推荐课程
          this.$http.get("education-course/base/removeRecommend/"+id).then((res)=>{
            if (res.data.success) {
              this.$message({
                message: res.data.message,
                type: 'success'
              })
              this.searchList()
            } else {
              this.$message.error(res.data.message)
            }
          })
        },
        searchEmpty:function(){//清空
          this.searchForm = {}
        },
        handleSizeChange: function (val) {
          this.page.pageSize = val
          this.searchList()
        },
        handleCurrentChange: function (val) {
          this.page.currentPage = val
          this.searchList()
        },
        searchList: function () {//课程推荐列表
          this.$http.post("education-course/base/listRecommend/" + this.page.currentPage + "/" + this.page.pageSize, this.searchForm).then((res) => {
            this.recommendList = res.data.result.list
            this.total = res.data.result.total
          })
        }
      },
      filters: {
        expiryDaysFit: function (v1) {
          return "购买后"+v1+"天"
        },
        courseStatusFit: function(val){
          if(val==1) return "上架"
          if(val==2) return "下架"
          if(val==0) return "未发布"
        },
        recommendedFit: function(val){
          if(val==1) return "首页-为你推荐课程"
          if(val==2) return "未推荐"
        }
      },
      mounted() {
        this.searchList()//列表展示
      }
    }
</script>

<style scoped>

</style>
